import React, { Component } from 'react'

export default class PagingGroup extends Component {
    constructor(props) {
        super(props);
        this.goToPageInput = React.createRef();
    }

    render() {
        const {
            pagingGroupShow,
            disabledFirst,
            disabledLast,
            pagingNumBtn,
            currentPage,
            pageNumTotal
        } = this.props.pageData;

        // 如果分页大于1，则显示分页按钮组
        if(pagingGroupShow) {
            return (
                <div className="PagingGroup">
                    {/* 分页按钮组容器 */}
                    <div className="PagingGroupBox">
                        {/* 回到首页按钮 */}
                        <button 
                            type="button"
                            disabled={disabledFirst}
                            onClick={() => {
                                this.props.resetPagingGroup(1)
                            }}
                        >首页</button>
                        {/* 下一页按钮 */}
                        <button 
                            type="button"
                            disabled={disabledFirst}
                            onClick={() => {
                                this.props.resetPagingGroup(currentPage - 1);
                            }}
                        >下一页</button>

                        {/* 数字分页按钮部分 */}
                        <div className="PagingNumGroup">
                            {pagingNumBtn.map(num => (
                                <button 
                                    type="button" 
                                    key={num}
                                    className={currentPage === num?'active':''}
                                    onClick={() => {
                                        this.props.resetPagingGroup(num);
                                    }}
                                >{num}</button>
                            ))}
                        </div>
                        
                        {/* 下一页按钮 */}
                        <button 
                            type="button"
                            disabled={disabledLast}
                            onClick={() => {
                                this.props.resetPagingGroup(currentPage + 1);
                            }}
                        >下一页</button>
                        {/* 末页按钮 */}
                        <button
                            type="button"
                            disabled={disabledLast}
                            onClick={() => {
                                this.props.resetPagingGroup(pageNumTotal);
                            }}
                        >末页</button>
                        {/* 跳转到指定的页 */}
                        <div className="ToAppointPage">
                            <span>到</span>
                            <input
                                ref={this.goToPageInput}
                                type="number" 
                                defaultValue={currentPage}
                            />
                            <span>页</span>
                            <button 
                                type="button"
                                onClick={() => 
                                    this.props.ToAppointPage(this.goToPageInput.current.value)
                                }
                            >跳转</button>
                        </div>
                    </div>
                </div>
            );
        }
        // 不显示分页按钮组
        else {
            return null;
        }
    }
}
